<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>Clipboard</h1>

<p>Clipboard plugin implements copy-pasting of cells. Optionally, clipboard also supports storing cells in an HTML 5 localStorage
so that copy-pasting of cells works despite a browser tab being refreshed or closed/reopened. Additionally, 
clipboard is also able to copy cells from one paper and paste them to another. However, the determination of the
targeted paper is left to the application layer.</p>

<h2>Install</h2>

<p>Add <code>joint.ui.clipboard.js</code> to your HTML:</p>

<pre><code>
&lt;script type="text/javascript" src="joint.ui.clipboard.js"&gt;&lt;/script&gt;
</code></pre>

<h2>Usage</h2>

<p>Instantiating a clipboard is a matter of creating a <code>joint.ui.Clipboard</code> object:</p>

<pre><code>
var clipboard = new joint.ui.Clipboard;
</code></pre>

<p>The clipboard has only two methods, <code>copyElements(selection, graph)</code> and <code>pasteCells(graph)</code>.
The next step is therefore hooking these methods to relevant user events. Although it is not necessary, 
we recommend using the great <a href="http://robertwhurst.github.io/KeyboardJS/">KeyboardJS</a> library for
handling key combos:</p>

<pre><code>
KeyboardJS.on('ctrl + c', function() { clipboard.copyElements(selection, graph); });
KeyboardJS.on('ctrl + v', function() { clipboard.pasteCells(graph); });
</code></pre>

<p>Note that the <code>selection</code> is a Backbone.Collection that stores the selected elements. The clipboard is 
probably the best when used in combination with the <b>SelectionView</b> JointJS plugin. We suggest you look at the
documentation to the SelectionView plugin for further details on using selections.</p>

<p>Also, it is advisable to look at our Kitchen Sink application to see how the SelectionView and Clipboard work together.</p>

<h2>API</h2>

<ul>
    <li><code>copyElements(selection, graph, options)</code> - Copy elements (and their associated links) stored in the <code>selection</code> collection from the <code>graph</code>.
        If <code>options.useLocalStorage === true</code>, store the copied elements to the HTML 5 localStorage.
        If <code>options.translate</code> contains an object with <code>{ dx: &lt;number&gt;, dy: &lt;number&gt; }</code>, 
        use the offset specified in <code>dx, dy</code> to translate the copied elements. This is useful when pasting the copied
        elements back to give the user a visual cue that new elements have been pasted.
    </li>
    <li><code>pasteCells(graph, options)</code> - Paste cells (previously copied elements and their associated links) to the <code>graph</code>.
        If <code>options.link</code> object is passed, properties in that object will be set as attributes to all the pasted links.
        This is useful when e.g. setting <code>{ z: -1 }</code> so that the newly pasted links will be put to the bottom of the paper. (Remind <code>toFront()/toBack()/z</code> facility 
        for setting z-level of cells).
    </li>
</ul>
